import React from 'react'
import { connect } from 'react-redux'
import { NavBar } from 'antd-mobile'
import NavLinkBar from '../navlinkbar/navlinkbar'
import { Route } from 'react-router-dom'
// import { Switch } from 'react-router-dom'
import Boss from '../boss/boss'
import Genius from '../genius/genius'
import User from '../user/user'
import Msg from '../msg/msg'
import NotFound from '../NotFound/NotFound'
import { getMsgList, recvMsg } from '../../redux/chat.redux'
import QueueAnim from 'rc-queue-anim'

@connect(
  state => state,
  { getMsgList, recvMsg }
)
class Dashboard extends React.Component {
  componentDidMount () {
    if (!this.props.chat.chatmsg.length) {
      this.props.getMsgList()
      this.props.recvMsg()
    }
  }
  render () {
    let pathname = this.props.location.pathname
    let user = this.props.user
    let navList = [
      {path: '/boss', text: '牛人', icon: 'boss', title: '牛人列表', component: Boss, hide: user.type === 'genius'},
      {path: '/genius', text: '牛人', icon: 'job', title: 'BOSS列表', component: Genius, hide: user.type === 'boss'},
      {path: '/msg', text: '消息', icon: 'msg', title: '消息列表', component: Msg, hide: false},
      {path: '/me', text: '我', icon: 'user', title: '个人中心', component: User, hide: false},
      {path: '*', text: 'NotFound', icon: 'user', title: 'NotFound', component: NotFound, hide: true}
    ]
    let page = navList.find(v => v.path === pathname)
    if (!page) {
      page = navList[4]
    }
    // console.log(page)
    // 路由这里想让动画生效，只能渲染一个 Route，根据当前的 path 决定组件渲染。因为动画库触发需要当前组件移除或添加
    return (
      <div className='page-wrap'>
        <div className='page-navbar'>
          <NavBar>{ page.title }</NavBar>
        </div>
        <div className='page-content'>
          {/* 添加动画前的路由控制 */}
          {/* <Switch>
            {navList.map(v => (
              <Route key={v.path} path={v.path} component={v.component} />
            ))}
            <Route component={NotFound}/>
          </Switch> */}
          <QueueAnim type='right'>
            {/* 这里可以不加 path 属性了，因为现在只渲染这一个路由组件，不过后来将 NotFound 的 path 设置为*也可以加上，因为这个可以匹配全部 */}
            <Route key={page.path} component={page.component} path={page.path}/>
          </QueueAnim>
        </div>
        <div className='page-navlink'>
          <NavLinkBar data={navList}></NavLinkBar>
        </div>
      </div>
    )
  }
}

export default Dashboard